<template>
  <div class="w-full min-h-screen bg-gray-50 relative">
    <!-- 导航栏 -->
    <div class="bg-white border-b border-gray-100">
      <div class="flex items-center justify-between px-4 py-3">
        <div class="flex items-center">
          <button @click="$router.back()" class="mr-4 text-gray-600">
            <i class="fas fa-arrow-left"></i>
          </button>
          <h1 class="text-lg font-semibold text-gray-800">设置</h1>
        </div>
      </div>
    </div>

    <div class="px-4 py-6 pb-20">
      <div class="bg-white rounded-lg shadow-sm mb-6">
        <!-- 播放设置 -->
        <div
          class="p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors"
          @click="$router.push('/settings/playback')"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-play-circle text-gray-600 mr-3"></i>
              <span class="text-gray-800">播放设置</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div>

        <!-- 缓存设置 -->
        <div
          class="p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors"
          @click="$router.push('/settings/cache')"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-download text-gray-600 mr-3"></i>
              <span class="text-gray-800">缓存设置</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div>

        <!-- 通知设置 -->
        <div
          class="p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors"
          @click="$router.push('/settings/notification')"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-bell text-gray-600 mr-3"></i>
              <span class="text-gray-800">通知设置</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm text-gray-500 mr-2">开启</span>
              <div class="w-10 h-6 bg-blue-600 rounded-full flex items-center">
                <div class="w-4 h-4 bg-white rounded-full ml-1"></div>
              </div>
            </div>
          </div>
        </div>

        <!-- 隐私设置 -->
        <div
          class="p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors"
          @click="$router.push('/settings/privacy')"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-shield-alt text-gray-600 mr-3"></i>
              <span class="text-gray-800">隐私设置</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div>

        <!-- 通用设置 -->
        <div
          class="p-4 border-b border-gray-100 cursor-pointer hover:bg-gray-50 transition-colors"
          @click="$router.push('/settings/general')"
        >
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-cog text-gray-600 mr-3"></i>
              <span class="text-gray-800">通用设置</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </div>

        <!-- 关于我们 -->
        <div class="p-4 cursor-pointer hover:bg-gray-50 transition-colors" @click="$router.push('/settings/about')">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-info-circle text-gray-600 mr-3"></i>
              <span class="text-gray-800">关于我们</span>
            </div>
            <div class="flex items-center">
              <span class="text-sm text-gray-500 mr-2">v1.0.0</span>
              <i class="fas fa-chevron-right text-gray-400"></i>
            </div>
          </div>
        </div>
      </div>

      <!-- 退出登录 -->
      <div class="bg-white rounded-lg shadow-sm">
        <button @click="logout" class="w-full p-4 text-left text-red-600 hover:bg-red-50 transition-colors">
          <div class="flex items-center justify-between">
            <div class="flex items-center">
              <i class="fas fa-sign-out-alt mr-3"></i>
              <span>退出登录</span>
            </div>
            <i class="fas fa-chevron-right text-gray-400"></i>
          </div>
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { showConfirmDialog } from 'vant'

const router = useRouter()
const userStore = useUserStore()

const logout = () => {
  showConfirmDialog({
    title: '提示',
    message: '确定要退出登录吗？'
  })
    .then(() => {
      // on confirm
      userStore.clearUserData()
      router.push('/login')
    })
    .catch(() => {
      // on cancel
    })
}
</script>
